<template>
	<view class="ctrcity">
		<view class="">
			<view class="items">
				<view style="display: flex;justify-content: space-between;">
					<view class="" style="display: flex;align-items: center;">
						<view class="left">
						</view>
						<view class="right">
							<view class="">
								电费
							</view>
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<text style="font-size: 30rpx;color: #049fff;" @click="goCity">查看账单</text>
						<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 40rpx;height:40rpx">
						</image>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="title">
					<view class="" style="font-size: 30rpx;">
						可用余额
					</view>
					<view class="" style="font-size: 45rpx;">
						￥300.00
					</view>
				</view>
				<view class="content">
					<view class="">
						<text class="name" style="margin-right: 100rpx;">户号</text>
						<text>0690090170</text>
					</view>
					<view class="">
						<text class="name" style="margin-right: 100rpx;">户主</text>
						<text>江峰</text>
					</view>
					<view class="">
						<text class="name">缴费单位</text>
						<text>南航供电公司</text>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<button class="Btns" @click="goenterpay">立即充值</button>
		</view>
	</view>
</template>

<script setup>
	const goCity = () => {
		uni.navigateTo({
			url: '/pages/server/views/PayRecord/PayRecord'
		})
	}
	const goenterpay = () => {
		uni.navigateTo({
			url: "/pages/server/views/EnterPay/EnterPay"
		})
	}
</script>

<style lang="scss">
	.ctrcity {
		height: 100vh;
		background-color: #fcfcfc;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.content {
			font-size: 30rpx;

			.name {
				color: #9a9a9a;
				margin-right: 35rpx;
			}
		}

		.Btns {
			margin-top: 70rpx;
			border: none;
			background-color: #006eff;
			color: white;
		}

		.items {
			background-color: white;
			border: 2rpx solid #f2f2f2;
			padding: 30rpx;
			margin-top: 30rpx;

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2px solid #f5f5f5;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
			}

			.left {
				width: 64rpx;
				height: 64rpx;
				background-color: #e6f1ff;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tel {
				color: #9a9a9a;
				font-size: 26rpx;
			}

			.right {
				line-height: 60rpx;

				.Btns {
					height: 46rpx;
					line-height: 46rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #f46363;
					background-color: #fde0e0;
					padding: 0rpx 15rpx;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>